<template>
  <div class="main">
    <el-container>
      <el-aside width='70%'>
        <info-tp :dataForm='workForm'>
          <template slot="tittle">工作动态</template>
        </info-tp>
        <info-tp :dataForm='policyForm'>
          <template slot="tittle">科技政策</template>
        </info-tp>
      </el-aside>
      <el-main>
        <div>
           <div>
              <span class="tittle">辖区工作站</span>
          </div>
          <div class="loc">
            <div v-for="o in 8">
              <el-row style="width:100%;display: flex;align-items: center;">
                <el-col :span='1'><div class="status-point"></div></el-col>
                <el-col :span='22' :offset='1' style="display:flex"><el-link class="linkcontent">科惠网十堰区域</el-link></el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import InfoTp from '../components/CommonTemplates/InfoTp.vue'
export default {
  name: 'HomePage',
  components: {
    InfoTp,
  },
  data () {
    return {
      workForm:{
        tittle:'工作动态',
        currentPage: 1,
        pageSize: 8,
        apiName: 'getpolicys',
        ptype: '工作动态',
      },
      policyForm:{
        tittle:'科技政策',
        currentPage: 1,
        pageSize: 8,
        apiName: 'getpolicys',
        ptype: '科技政策',
      },
    }
  },
  created() {
  
  },
  
}
</script>

<style scoped>
.main{
  width: 1180px;
  margin: auto;
}
.el-main{
  margin-left: 80px;
}
.tittle{
  padding: 12px;
  font-size: 22px;
  display: flex;
  font-weight: 600;
  border-bottom: 2px solid skyblue;
}
.loc{
  margin: 10px;
  padding: 10px;
  background-color: gainsboro;
}
.linkcontent{
  font-size: 16px;
  margin: 16px 0px; 
}
.status-point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: orange;
}
</style>
